<template>
  <section class="main-content">

    <div class="section-cont main-con mt-10 mb-20">
      <el-row class="section-container" align="middle" :gutter="20">
        <el-col class="mb-20" :span="2">
          <div class="grid-content text-center">
            <div><el-icon title="点赞"><StarFilled /></el-icon></div>
            <div><el-icon title="分享"><Share /></el-icon></div>
            <div>打赏</div>
          </div>
        </el-col>
        <el-col class="mb-20 article-content" :span="16">
          <div class="grid-content">
            <h2>内网穿透 - 反向代理 - frp 使用指南</h2>
            <div style="border-bottom: 1px solid #ccc">
              2022 10 11
            </div>
            <div style="background: #efefef;text-indent: 2em;">
              <p style="padding:0 10px;line-height: 2em;">
                云文件上传与本地文件上传的区别就是，分片文件直接上传到云端，再调用云存储api进行文件合并与文件拷贝，数据库相关记录与检查差异不大
              </p>
            </div>
            <div class="article-content" >

              
              <b class="x">laravel中队列的使用</b><br>
              <p>Laravel 队列组件提供一个统一的 API 集成了许多不同的队列服务，队列允许你延后执行一个耗时的任务，例如延后至指定的时间才发送邮件，进而大幅的加快了应用程序处理请求的速度。</p>
              <p>队列的配置文件在config/queue.php，在这个文件你将可以找到框架中每种不同的队列服务的连接设置，其中包含了Beanstalkd、IronMQ、Amazon SQS、Redis、null，以及同步 (本地端使用) 驱动设置。驱动null 只是简单的舍弃队列工作，因此那些工作永远不会执行。</p>
              <b class="x">队列优点</b><br>
              <ul>
                <li>解耦：消息队列可以对系统进行解耦，提高响应速度，系统功能向内聚合，对外开放；</li>
                <li>异步：消息队列可以对系统异步功能进行剥离，减少功能耦合，提供开发效率；</li>
                <li>削峰：消息队列可以削峰限流，确保下游消费者稳定运行；</li>
              </ul>

              <b class="x">队列数据表</b><br>
              <p>为了能够使用database 驱动，你需要建立一个数据表来保存工作。要使用一个迁移建立这个数据表，可以执行queue:table Artisan 命令：</p>
              <pre>php artisan queue:table</pre><br/>
             
              <b class="x">基本用法</b><br/>
              <p>推送一个工作至队列</p>
              <p>应用程序中能够放进队列的工作都存放在App\Commands 目录下，你可以借由下面 Artisan 命令产生一个可使用队列的命令：</p>
              <pre>php artisan make:command SendEmail --queued</pre><br/>
              <p>要推送一个新的工作至队列，请使用Queue::push 方法：</p>
              <pre>Queue::push(new SendEmail($message));</pre><br/>
              <p>默认情况下，make:command Artisan 命令会产生一个 "self-handling" 的命令，意味着命令里会包含一个handle 方法。这个方法将会在队列执行时被调用。你可以在handle 方法使用时提示传入任何你需要的依赖，而服务容器 会自动注入他们：</p>
              <pre>public function handle(UserRepository $users)
{
    //
}</pre>
  
            </div>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div v-if="hotArticle.length>0" class="grid-content">
            <ul>
              <li><span class="mb-10" style="font-size:18px;">最新发布:</span></li>
              <li v-for="item in hotArticle" v-bind:key="item" @click="urlto( 'article?id='+ item.id)">
                <a style="color:var(--color-gray)">{{ item.title }} <span class="f-r mr-8">{{ item.category.title }}</span></a>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>
<script>
export default {
  name: "show.vue",
  components: {
  },
  data() {
    return {
      hotArticle:sessionStorage.getItem('access-hotArticle')?JSON.parse(sessionStorage.getItem('access-hotArticle')):[],
    }
  },
  watch:{

  },
  async created(){
    await this.getDataByApi();
  },
  mounted() {
    console.log(this.article)
  },
  methods: {
    async getDataByApi(){
      if(this.hotArticle.length == 0) {
        await this.$API.home.getHotArticle({istop: 1, ishot: 1, limit: 8}).then(res => {
          if (res.message == "OK") {
            this.hotArticle = res.data
          } else {
            this.$message.error('接口失效')
            return false;
          }
        })
      }
    },

    paramsGet(key){
      const params = {};
      if(key.includes("&")){
        const mParams = key.split('&')
        for(const item in mParams){
          const temp = mParams[item].split('=')
          params[temp[0]] = temp[1]
        }
      }else{
        const temp = key.split('=')
        params[temp[0]] = temp[1]
      }
      return params;
    },

    urlto(key){
      console.log('jump:'+ key)
      if(key.includes("?")){
        const keyPath =  key.split('?')
        this.$router.push({name:keyPath[0],params:this.paramsGet(keyPath[1])})
      }else{
        this.$router.push({name:key})
      }
    }
  }
}
</script>

<style typeof="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.main-content{
  margin-top: 100px;
}
.main-content .section-cont{
  margin: auto;
  width: var(--web-width);
}
.main-content .section-container{
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: var(--web-width);
  line-height: 30px;
  letter-spacing: -.03em;
  overflow:hidden;
}

.ls-add ul{
  background: #dedede;
  border-radius: 4px;
  overflow: hidden;
}
.ls-add ul li{
  float: left;
  margin: 0 35px
}
.ls-add ul li a{
  color:#ffffff;
}
.ls-add ul li:hover a{
  color: var(--color-red)
}
.ls-add ul li a span{

}
.main-con .section-container{
  background: var(--color-lightGrey);
  align-items: baseline;
}
.main-con .section-container .article-content{
  background-color: rgb(255, 255, 255);
  margin: 20px 0px;
  border-radius: 4px;
  min-height:500px;
}
.article-content{
  line-height: 2em;
}
</style>